<template>
	<div class="back_contain_n">
		<div class="leftList">
			<li v-for="(item,index) in paramList" :key="index" :class="{'active': viewType == item.key}"
				@click="changeView(item)">
				<el-badge :value="item.num" class="item">
					<span>{{item.name}}</span>
				</el-badge>
			</li>
		</div>
		<!-- 头部搜索 -->
		<div class="Search_Top_Part" v-if="viewType == '1' || viewType=='2'">
			<div class="search_list">
				<div>
					<div class="input_flex">
						<el-input clearable v-model="queryForm.boxCode" placeholder="箱码"></el-input>
					</div>
					<div class="input_flex" v-if="viewType == '1'">
						<el-select clearable v-model="queryForm.printCode" placeholder="使用状态">
							<el-option label="未使用" value="0"></el-option>
							<el-option label="已使用" value="1"></el-option>
						</el-select>
					</div>
					<div class="input_flex" v-if="viewType == '1'">
						<el-select clearable v-model="queryForm.codeStatus" placeholder="类型">
							<el-option label="生产已入库" value="1"></el-option>
							<el-option label="整理已入库" value="2"></el-option>
							<el-option label="退货已入库" value="3"></el-option>
							<el-option label="订单已出库" value="6"></el-option>
							<el-option label="清理已出库" value="7"></el-option>
						</el-select>
					</div>
					<div class="input_flex daterange">
						<el-date-picker v-model="time" type="daterange" range-separator="-" start-placeholder="开始日期"
							end-placeholder="结束日期">
						</el-date-picker>
					</div>

				</div>
			</div>
			<div class="search_bt">
				<span class="zll-search" @click="getList">搜索</span>
				<span class="zll-search-reset" @click="searchReset()">重置</span>
			</div>
		</div>
		<div class="Search_Top_Input" v-if="viewType == '0'">
			<div class="num">
				<span>未使用数量:</span>

				<span>{{total}}</span>
			</div>
			<div class="addNew">
				<span class="tai" style="width: 80px !important;" @click="repeatPrint">复 打</span>
				<span class="tai" style="background: #f56c6c;width: 80px !important;" @click="batchPrint">批量打印</span>
				<span class="info" style="width: 80px !important;" @click="remove">作废</span>
			</div>
		</div>
		<div class="Search_Top_Input" v-if="viewType == '1'">
			<div class="addNew">
				<span class="tai" style="background: #f56c6c;" @click="handleBd">未出库破损补打</span>
			</div>
		</div>
		<div class="Search_Top_Input" v-if="viewType == '2'">
			<div class="num">
				<span>已作废数量：</span>

				<span>{{total}}</span>
			</div>
		</div>
		<!-- table -->
		<sys-table class="m_table" ref="systable" :isMultipleSelection="true" :tableData="tableData"
			:tableLoading="tableLoading" :tableHeader="tableHeader" :scopeWidth="120" :backCount="backCount"
			@getBackData="getList" @getSelection="getSelection">
			<template slot-scope="scope" slot="operate">
				<el-button @click="edit(scope.row,'see')" type="text" size="small">查看</el-button>
			</template>
		</sys-table>

		<div class="zll-dialog">
			<popout :title="dialogTitle" :visible.sync="addDialog" v-if="addDialog" class="max_size">
				<add ref="add" slot="content" :editData="editData" :type="type"></add>
				<template slot="bottom">
					<p class="zll-botton Info" @click="addDialog = false">关 闭</p>
				</template>
			</popout>
		</div>
		<div class="zll-dialog">
			<popout :title="dialogTitle" :visible.sync="addDialog2" v-if="addDialog2" class="max_size">
				<add2 ref="add2" slot="content" :editData="editData" :type="type"></add2>
				<template slot="bottom">
					<p class="zll-botton Info" @click="addDialog2 = false">关 闭</p>
				</template>
			</popout>
		</div>

		<div class="zll-dialog">
			<popout title="批量打印 " :visible.sync="addPrintDialog" v-if="addPrintDialog" class="long_size">
				<batchPrint ref="add" slot="content"></batchPrint>
				<template slot="bottom">
					<p class="zll-botton Info" @click="addPrintDialog = false">关 闭</p>
					<p class="zll-botton" @click="()=>{this.$refs.add.submitForm('addForm')}">提交&打印</p>
				</template>
			</popout>
		</div>
	</div>
</template>

<script>
	import Add from './add'
	import Add2 from './add2'
	import batchPrint from './batchPrint'
	import { getStore } from "@/plugins/localStore";
	import { formatDate } from "@/plugins/formatDate";

	export default {
		data() {
			return {
				viewType: '0',
				paramList: [
					{ name: "未使用", key: '0', },
					{ name: "已使用", key: '1', },
					{ name: "已作废", key: '2', },
				],
				tableLoading: true, //table刷新
				type: '',
				editData: {},

				queryForm: {
					boxCode: '',
					printCode: '',
					codeStatus: '',
				},
				backCount: 0,
				tableData: [],
				tableHeader: [],
				addDialog: false,
				addDialog2: false,

				selectChoice: [],
				addPrintDialog: false,
				dialogTitle: '',
				time: []
			}
		},
		methods: {
			changeView(val) {
				this.viewType = val.key;
				this.getList(0, 0)

			},
			batchPrint() {
				this.addPrintDialog = true;
			},

			emptyPrint() {
				let self = this;
				if (self.selectChoice.length == 0) {
					self.$message.warning('请选择打印的箱码！');
					return;
				}
				let params = [];
				let printTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss');
				for (let data of self.selectChoice) {
					let param = { boxCode: data.boxCode, printUserName: getStore().userName, printTime: printTime };
					params.push(param);
				}
				self.$http({
					url: "/jinl/box/updateEmptyPrintBox",
					method: "post",
					data: JSON.stringify(params),
					dataType: 'json',
					contentType: 'application/json',
				}).then(resp => {
					if (resp.success) {
						self.$message.success('打印指令发送成功！');
						self.getList();
						return;
					}
					self.$message.error(resp.message);
				});
			},
			remove(row) {
				let boxCodes = [];
				for (let data of this.selectChoice) {
					boxCodes.push(data.boxCode);
				}
				this.deleteMethod(boxCodes);
			},
			deleteMethod(boxCodes) {
				let self = this;
				let param = { boxCodes: boxCodes, name: getStore().userName };
				if (param.boxCodes.length == 0) {
					self.$notify({
						title: '提示',
						message: "至少选择一条记录！",
						type: 'warning'
					});
					return
				}
				this.$confirm('是否作废?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http({
						url: '/jinl/box/voidBoxManage',
						method: "post",
						data: JSON.stringify(param),
						dataType: 'json',
						contentType: "application/json",
					}).then(resp => {
						if (resp.success) {
							self.getList();
							self.$message.success('作废成功！');
							return
						}
						self.$message.error(resp.message);
					});
				})
			},


			repeatPrint() {
				let self = this;
				if (self.selectChoice.length == 0) {
					self.$message.warning('请选择打印的箱码！');
					return;
				}
				let params = [];
				let printTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss');
				for (let data of self.selectChoice) {
					let param = { boxCode: data.boxCode, printUserName: getStore().userName, printTime: printTime };
					params.push(param);
				}
				self.$http({
					url: "/jinl/box/updateRepeatPrintBox",
					method: "post",
					data: JSON.stringify(params),
					dataType: 'json',
					contentType: 'application/json',
				}).then(resp => {
					if (resp.success) {
						self.$message.success('打印指令发送成功！');
						self.getList();
						return;
					}
					self.$message.error(resp.message);
				});
			},


			getList(startIndex, pageRow) {
				let self = this;
				self.tableLoading = true;
				if (this.time && this.time.length == 2) {
					//date类型
					self.queryForm.startTime = formatDate(new Date(self.time[0]), 'yyyy-MM-dd')
					self.queryForm.endTime = formatDate(new Date(self.time[1]), 'yyyy-MM-dd') + ' 23:59:59'
				} else {
					self.queryForm.startTime = ''
					self.queryForm.endTime = ''
				}
				let pageInfo = self.$refs.systable.getPageInfo(startIndex);
				if (pageInfo.pageNum == 0 || startIndex == 0) {
					self.$refs.systable.resetPage();
				}
				self.queryForm.startIndex = pageInfo.pageNum;
				self.queryForm.totalPage = pageInfo.pageSize;
				let param = Object.assign({}, self.queryForm);
				param.type = self.viewType;
				self.$http({
					url: "/jinl/box/getNewBoxManageList",
					method: "post",
					params: param
				}).then(resp => {
					if (resp.success) {
						self.tableLoading = false;
						self.tableData = resp.result;
						self.tableHeader = [
							{ "columnValue": "printUserName", "columnName": "打印人" },
							{ "columnValue": "printTime", "columnName": "打印时间" },
							{ "columnValue": "boxCode", "columnName": "箱码" },
							{ "columnValue": "printCodeCn", "columnName": "使用状态", refColor: true },
						];
						if (self.viewType == 1) {
							self.tableHeader = [
								{ "columnValue": "printUserName", "columnName": "打印人" },
								{ "columnValue": "printTime", "columnName": "打印时间" },
								{ "columnValue": "boxCode", "columnName": "箱码" },
								{ "columnValue": "codeStatusCn", "columnName": "使用状态", refColor: true },

							];
						}
						if (self.viewType == 2) {
							self.tableHeader = [
								{ "columnValue": "printUserName", "columnName": "打印人" },
								{ "columnValue": "printTime", "columnName": "打印时间" },
								{ "columnValue": "boxCode", "columnName": "箱码" },
								{ "columnValue": "voidName", "columnName": "作废人" },
								{ "columnValue": "voidTime", "columnName": "作废时间" },
								{ "columnValue": "printCodeCn", "columnName": "使用状态", refColor: true },

							];
						}
						if (resp.result.length > 0) {
							self.backCount = resp.result[0].count;
						} else {
							self.backCount = 0;
						}
						this.total = self.backCount;


					}
				});

			},
			handleBd() {
				this.type = 'add';
				this.dialogTitle = '破损补打';
				this.addDialog2 = true;
			},
			edit(val, type) {
				let self = this;
				if (type == 'see') {
					self.dialogTitle = '条码数据链'
				}
				if (self.viewType == '1') {
					self.addDialog2 = true;
				} else {
					self.addDialog = true;
				}

				self.type = type;
				self.$nextTick(() => {
					self.editData = Object.assign({}, val);
				});
			},
			searchReset() { //重置搜索
				this.queryForm = {
					boxCode: '',
					printCode: '',
					codeStatus: '',
				};
				this.getList(0, 0)
			},
			getSelection(val) {
				this.selectChoice = val;
			},
		},
		mounted() {
			let self = this;
			self.getList()
			self.$eventBus.$on("updateBoxList", function () {
				self.addDialog = false;
				self.addPrintDialog = false;
				self.getList()
			})

		},
		components: {
			Add, batchPrint, Add2
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/style/SearchTop.scss";

	.leftList {
		display: flex;
		margin-bottom: 15px;

		li {
			list-style: none;
			width: 100px;
			height: 30px;
			line-height: 28px;
			border-bottom: 1px solid #fff;
			color: #333;
			text-align: center;
			cursor: pointer;
			margin-bottom: 10px;
			transition: all .5s;
			position: relative;
			display: flex;
			justify-content: center;

			&.active {
				color: #ff9935;
				border-color: #ff9935;
				position: relative;
				font-weight: 600;
				font-size: 14px;
			}
		}
	}

	.Search_Top_Input {
		justify-content: left;
		height: 36px;
		color: #666;

		.num {
			font-size: 14px;
			display: flex;
			align-items: center;
			margin-right: 30px;

			span:last-child {
				display: flex;
				align-items: center;
				font-weight: bold;
			}
		}
	}
</style>